<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>JSON 生成器</title>
    <link rel="stylesheet" href="./css/default.min.css"/>
    <script src="./js/highlight.min.js"></script>
    <script>
        hljs.highlightAll();
    </script>
</head>

<body>
<div class="btnbox" id="btnbox">
    <button class="btn" onclick="generate()">生成json</button>
</div>
<div class="con">
    <div class="left">
        <textarea id="myTextarea" name="myTextarea"> </textarea>
    </div>
    <div>
        <pre>
            <code id="code " class="language-js "></code>
            </pre>
    </div>
</div>
<script>
    let myTextarea = document.getElementById("myTextarea");
    myTextarea.innerHTML = `[
  '{{repeat(2, 3)}}',
  {
    isActive: '{{bool()}}',
    age: '{{integer(20, 40)}}',
    num:2,
    boolean:true,
    str:'str',
    isTel:'{{bool}}',
    fn:'{{fn()}}'
   }
]`;
    let code = document.getElementById("code ");
    let lastData;

    // 点击生成按钮生成对应的 JSON
    function generate() {
        let str = myTextarea.value.replace(/\s*/g, "");
        var jsonData = new Function("return" + str)();
        lastData = generateData(jsonData);
        let jsonCode = JSON.stringify(lastData, null, 2); // 设置 tab 为两个空格
        code.innerHTML = jsonCode;
        hljs.highlightAll();
    }
</script>
<script src="./js/index.js "></script>
</body>
</html>
